<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>sentox-Dialog</title>
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/font-awesome.min.css">

		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	</head>

	<body style="margin:10px;">
		<h2>Basic Dialog</h2>
		<p>Click below button to open or close dialog.</p>
		<div style="margin:20px 0;">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg1').dialog('open')">Open</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg1').dialog('close')">Close</a>
		</div>
		<div id="dlg1" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'fa fa-save fa-yxa8'" style="width:400px;height:200px;padding:10px">
			The dialog content.
		</div>
		
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>Toolbar and Buttons</h2>
		<p>The toolbar and buttons can be added to dialog.</p>
		<div style="margin:20px 0;">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg2').dialog('open')">Open</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg2').dialog('close')">Close</a>
		</div>
		<div id="dlg2" class="easyui-dialog" title="Toolbar and Buttons" style="width:400px;height:200px;padding:10px"
				data-options="
					iconCls: 'fa fa-save fa-yxa8',
					toolbar: [{
						text:'Add',
						iconCls:'fa fa-plus fa-yxa4',
						handler:function(){
							alert('add')
						}
					},'-',{
						text:'Save',
						iconCls:'fa fa-save fa-yxa4',
						handler:function(){
							alert('save')
						}
					}],
					buttons: [{
						text:'Ok',
						iconCls:'fa fa-check fa-yxa4',
						handler:function(){
							alert('ok');
						}
					},{
						text:'Cancel',
						handler:function(){
							alert('cancel');;
						}
					}]
				">
			The dialog content.
		</div>
		
		<!----------------------------------------------------------------------------------------------------------------------------->
		
		<h2>Complex Toolbar on Dialog</h2>
		<p>This sample shows how to create complex toolbar on dialog.</p>
		<div style="margin:20px 0;">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg3').dialog('open')">Open</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg3').dialog('close')">Close</a>
		</div>
		<div id="dlg3" class="easyui-dialog" title="Complex Toolbar on Dialog" style="width:400px;height:200px;padding:10px"
				data-options="
					iconCls: 'fa fa-save fa-yxa8',
					toolbar: '#dlg-toolbar',
					buttons: '#dlg-buttons'
				">
			The dialog content.
		</div>
		<div id="dlg-toolbar" style="padding:2px 0">
			<table cellpadding="0" cellspacing="0" style="width:100%">
				<tr>
					<td style="padding-left:2px">
						<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-edit fa-yxa4',plain:true">Edit</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'fa fa-question-circle fa-yxa4',plain:true">Help</a>
					</td>
					<td style="text-align:right;padding-right:2px">
						<input class="easyui-searchbox" data-options="prompt:'Please input somthing'" style="width:150px"></input>
					</td>
				</tr>
			</table>
		</div>
		<div id="dlg-buttons">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:alert('save')">Save</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">Close</a>
		</div>
		
		<script type="text/javascript">
			$(function(){
				$('#dlg2').dialog('close');
				$('#dlg3').dialog('close');
			});
		</script>
	</body>

</html>